<template>
    <div class="houseList-v9">

        <section class="card">
            <img :src="HouseData.image.url" alt="">
            <div class="top">
                <p>优选PRO</p>
                <img src="@/assets/img/home-love.png" alt="">
            </div>

            <div class="card-bottom">
                <div class="summaryText">
                    <p> {{ HouseData.summaryText }}</p>
                </div>
                <div class="houseName">
                    <p>{{ HouseData.houseName }}</p>
                </div>
                <div class="housePrice">
                    <van-rate size="12" :model-value="Number(HouseData.commentScore)" readonly allow-half />
                    <span class="finalPrice">¥{{ HouseData.finalPrice }}</span>
                    <!-- <span class="productPrice">{{item.data.productPrice}}</span> -->
                </div>
            </div>
        </section>


    </div>
</template>

<script setup>


defineProps({
    HouseData: {
        type: Object,
        default: () => ({})
    }
});


/* const HomeStore = useHomeStore()
HomeStore.getHouseListData()
const { HouseList } = storeToRefs(HomeStore);
console.log('HouseListv9----', HouseList.value); */
</script>

<style lang="less" scoped>
.houseList-v9 {
    width: 50%;


    .card {

        position: relative;
        margin: 5px;
        padding: 0;



        img {
            width: 100%;

            border-radius: 8px;
        }

        .top {
            font-size: 14px;

            color: rgb(63, 63, 247);

            p {
                position: absolute;
                top: 10px;
                left: 5px;
            }

            img {
                position: absolute;
                width: 30px;
                height: 30px;
                top: 5px;
                right: 5px;

            }

        }

        .card-bottom {
            position: absolute;

            bottom: 0;
            padding: 8px 10px;
            color: rgb(255, 255, 255);


            .summaryText {

                font-size: 12px;
                padding-bottom: 6px;
            }

            .houseName {
                p {
                    overflow: hidden;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    font-size: 14px;
                }

            }

            .housePrice {
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 16px;

            }
        }

    }

}
</style>